<template>
	<view class="progress">
		<view class="line">
			<view style="z-index: 100;" class="dots">
				<view class="dot df-c" :class="{dot:true,active:item.active}" :key="index" v-for="(item,index) in node">
					<view class="tail df-c">
						<image v-if="item.prizes_type!=10&&item.prizes_image" style="width: 86rpx;"
							:src="item.prizes_image|httpImg" mode="widthFix">
						</image>
						<view class="next_ward df fs24 highlight"
							v-if="item.prizes_type==10&&node[index-1].prizes_type!=10&&currNum>=min">
							<image style="width: 22rpx;" src="/static/imgs/images/jiangpinicon.png" mode="widthFix">
							</image>
							<text class="ml10">下轮大奖</text>
						</view>
					</view>
					<view class="goal">{{item.num_2}}</view>
				</view>
			</view>
			<view :style="{width:(currNum/max)*100+'%'}" class="active_line">
				<view :style="{opacity:item,right:10+'rpx'}" class="active_dots">
					<view class="active_dot" :style="{opacity:item}" v-for="(item,index) in active_dots" :key="index">
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			node: Array,
			currNum: Number,
			max: Number,
			min: Number,
			daygameMessage:Object
		},
		data() {
			return {
				curr: 100000,
				active_dots: [0.3, 0.5, 0.9],
				active_width: 0,
				IMGURL: this.$IMG_URL,
			}
		},
		filters: {
			httpImg: function(value) {
				if(value.indexOf('http')!=-1){
					return value
				}else{
					return 'https://stea.demos.cn.vc'+value
				}
			}
		},
		created(){
			
		},
		methods: {

		},
	}
</script>

<style scoped lang="scss">
	.line {
		width: 630rpx;
		height: 22rpx;
		background: linear-gradient(to right,
				rgba(0, 0, 0, 0) 2%,
				rgba(0, 0, 0, 0.1) 10%,
				rgba(0, 0, 0, 0.1) 90%,
				rgba(0, 0, 0, 0) 100%);
		border-radius: 11rpx;
		position: relative;
	}


	.dots {
		position: absolute;
		display: flex;
		top: 50%;
		transform: translateY(-50%);
		width: 100%;
		justify-content: space-around;
		z-index: 10;
		align-items: center;
	}

	.dot {
		width: 75rpx;
		height: 75rpx;
		background: #622128;
		border: 2px solid #E2C08B;
		border-radius: 50%;
		position: relative;

		.tail {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: -110rpx;
			height: 86rpx;

			.next_ward {
				width: 161rpx;
				border: 1px;
				height: 68rpx;
				background-image: url(#{$IMG_URL}/qipao.png);
				background-size: 100%;
				align-items: center;
				padding-bottom: 10rpx;
				background-position: center 6rpx;
				background-repeat: no-repeat;
				justify-content: center;

			}
		}

		.goal {
			font-size: 28rpx;
			font-family: Bodoni MT;
			font-weight: bold;
			color: #E3AB6E;
		}
	}

	.active_line {
		position: absolute;
		height: 100%;
		background-color: red;
		top: 0;
		left: 0;
		z-index: 5;
		border-radius: 0 22rpx 22rpx 0;
		background: linear-gradient(90deg, transparent, #E3AB6E);
	}

	.active_dots {
		position: absolute;
		display: flex;
		z-index: 20;
		align-items: center;
		height: 100%;
	}

	.active_dot {
		width: 11rpx;
		height: 11rpx;
		background: #622128;
		border-radius: 50%;
		margin: 0 4rpx;
	}
</style>
